<template>
  <el-card class="glass-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>通道值</span>
        <el-tag size="small" effect="plain">{{ items.length }} 通道</el-tag>
      </div>
    </template>
    <div class="content">
      <div class="chart">
        <ECharts :options="chartOptions" height="220px" />
      </div>
      <el-table :data="items" size="small" class="mt-2" height="240" border>
        <el-table-column prop="序号" label="序号" width="70" align="center" />
        <el-table-column prop="名称" label="名称" min-width="180" show-overflow-tooltip />
        <el-table-column prop="量值" label="量值" min-width="120" align="right">
          <template #default="scope">{{ formatValue(scope.row.量值) }}</template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import type { ChannelSimpleItem } from "@/api/hmi/home.api";
import type { EChartsCoreOption } from "echarts/core";

defineOptions({ name: "ChannelCard" });
const props = defineProps<{ items: ChannelSimpleItem[] }>();

const formatValue = (v: number) => (v ?? 0).toFixed(6);

const chartOptions = computed<EChartsCoreOption>(() => {
  const labels = props.items.map((it) => it.名称);
  const values = props.items.map((it) => it.量值);
  return {
    grid: { left: 10, right: 10, top: 10, bottom: 10, containLabel: true },
    tooltip: { trigger: "axis" },
    xAxis: { type: "category", data: labels, axisLabel: { rotate: 30 } },
    yAxis: { type: "value" },
    series: [
      {
        type: "bar",
        data: values,
        smooth: true,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#7dd3fc" },
              { offset: 1, color: "#60a5fa" },
            ],
          },
          borderRadius: [6, 6, 0, 0],
        },
      },
    ],
  } as EChartsCoreOption;
});
</script>

<style scoped lang="scss">
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.content {
  display: flex;
  flex-direction: column;
}
.mt-2 { margin-top: 8px; }
</style>

